<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>随心——产品</title>
    <link rel="stylesheet" href="/stylesheets/css/index.css">
  </head>
  <body>
    <div class="container">
      <%- include('he_nav') -%>

      <div class="main box">
        <h1>产品列表</h1>
        <div class="productlist">
          <% productlist.forEach(doc=>{ %>
            <% doc.pdescription = doc.pdescription.replace(/\r\n/g, '</p><p>').replace(/\n/g, '</p><p>').replace(/\s/g, '&nbsp'); %>
          <div class="product">
            <h2><%= doc.pname%></h3>
            <img src="<%= doc.pimgsrc%>" alt="">
            <h6>产品价格 : <%= doc.pprice%> | 浏览次数 : <%= doc.accessNum%> </h6>
            <div>
              <!-- <p class="show" maxlength="10">产品详情：<%= doc.pdescription%></p> -->
            </div>
            <p>更新时间：<%= doc.S_Time%></p>
            <a href="/users/product/<%= doc.id%>/detail">产品详情</a>
            <a href="#" onclick="editPro()">编辑</a>
            <a href="#" onclick="deletePro()">删除</a>
          </div>
          <%})%>
        </div>
        <div class="pagearr">
          <a href="/product/?page=<%= prevPage %>">上一页</a>
          <a href="/product/?page=<%= nextPage %>">下一页</a>
        </div>


        <form action="/users/product" method="post">
          <input type="text" name="pname" placeholder="产品名称（20字以内）">
          <div style="color:red" data-error="pname"></div>
          <input type="file" class="file" type="file" alt="上传图片" onchange="createReader(readImage)(event)">
          <div style="color:red" data-error="img"></div>
          <input type="text" name="pprice" placeholder="产品价格（即￥0.01~￥999999.99）">
          <div style="color:red" data-error="pprice"></div>
          <textarea name="pdescription" maxlength="100" placeholder="产品详情（100字以内）"></textarea>
          <div style="color:red" data-error="pdescription"></div>
          <%= firstnum %> + <%= secondnum %> = <input type="text" class="verif" name="vnum" >
          <button type="submit" name="button">发布产品</button>
          <div style="color:red" data-error="vnum"></div>
        </form>
      </div>

      <%- include('sid_footer') -%>
    </div>
    <script type="text/javascript" src="../../../javascripts/open.js"></script>
    <script type="text/javascript" src="../../../javascripts/readfile.js"></script>
    <script type="text/javascript" src="../../../javascripts/validateProduct.js"></script>
    <script type="text/javascript">
      const form = document.querySelector("form");
      const doms = form.querySelectorAll("div");
      const pnameerror = doms[0];
      const pimgsrcerror = doms[1];
      const ppriceerror = doms[2];
      const pdescriptionerror = doms[3];
      const vnumerror = doms[4];
      const firstnum = <%= firstnum %>;
      const secondnum = <%= secondnum %>;

      async function editPro(event){
        const a = window.event.target;
        const proLogHref = a.previousElementSibling.href;
        console.log("proLogHref=",proLogHref);
        const proLogId = proLogHref.split("/")[5];
        console.log("proLogId=",proLogId);
        await fetch("/users/product/edit",{
          method:"POST",
          body: JSON.stringify({proLogId}),
          credentials:"include",
          headers:{
            "Content-Type":"application/json"
          }
        }).then(res=>res.text())
          .then(errors=>alert(errors))
          .catch(e => console.log("error", e));
        location.href = proLogHref;
      }

      async function deletePro(event){
        const a = window.event.target;
        const proLogHref = a.previousElementSibling.previousElementSibling.href;
        console.log("proLogHref=",proLogHref);
        const proLogId = proLogHref.split("/")[5];
        console.log("proLogId=",proLogId);
        await fetch("/users/product/delete",{
          method:"POST",
          body: JSON.stringify({proLogId}),
          credentials:"include",
          headers:{
            "Content-Type":"application/json"
          }
        }).then(res=>res.text())
          .then(errors=>alert(errors))
          .catch(e => console.log("error", e));
        location.href="/product";
      }

      form.onsubmit = async function (event) {
        event.preventDefault();
        const inputs = form.querySelectorAll("input");
        const pname = inputs[0].value;
        var pimgsrc = "";
        if (pimgsrcerror.firstChild) {
          pimgsrc = pimgsrcerror.firstChild.src;
        }
        const pprice = inputs[2].value;
        const vnum = inputs[3].value;
        const pdescription = form.querySelector("textarea").value;
        const errors = valiPro(pname,pimgsrc,pprice,pdescription,vnum,firstnum,secondnum);
        if(errors){
          showInfo(JSON.stringify(errors));
        }else{
          await fetch("/users/product",{
            method:"POST",
            body: JSON.stringify({pname,pimgsrc,pprice,pdescription,vnum}),
            credentials:"include",
            headers:{
              "Content-Type":"application/json"
            }
          }).then(res=>res.text())
            .then(errors=>alert(errors))
            .catch(e => console.log("error", e));
          location.href="/product";
        }
      }
    </script>

    </div>
  </body>
</html>
